﻿@*<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">*@
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            系统管理
            <small>层级管理</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">系统管理</a></li>
            <li class="active">层级管理</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <div class="input-group">
                            <span class="input-group-addon">日期范围</span>
                            <input type="text" v-model="datemin" ref="datemin" id="datemin" class="form-control" placeholder="开始时间" style="width:120px;">
                            <input type="text" v-model="datemax" ref="datemax" id="datemax" class="form-control" style="width:120px;">
                        </div>
                        <div id="toolbar" class="btn-group">
                            <button id="btn_search" v-on:click="searchL" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
                            </button>
                            <button id="btn_add" v-on:click="showL" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                            </button>
                            <button id="btn_edit" v-on:click="editL" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                            </button>
                            <button id="btn_delete" v-on:click="deleteL" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                            </button>
                        </div>
                        <table id="bootstraptable" class="table table-bordered text-nowrap table-hover"></table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section scripts{
    @*<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
        <script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>*@
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                datemin: '',
                datemax: '',
                clientWidth: document.body.clientWidth,//获取设备屏幕的宽度
            },
            mounted: function () {
                var _self = this;
                _self.$nextTick(function () {
                    //显示active
                    _self.$refs.Dept.parentNode.parentNode.classList.add("active");
                    _self.$refs.Dept.classList.add("active");
                    //_self.loadL();
                    _self.datemax = _self.getCurrentMonthLast();
                    $('#datemin').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    $('#datemax').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    setTimeout(function () {
                        _self.loadL();
                        setDataCardView("#bootstraptable");
                        $("div[class='pull-right search']")[0].children[0].setAttribute("placeholder", "层级名称");
                    }, 500);
                });
            },
            methods: {
                loadL: function () {
                    //, {
                    //    field: 'FatherName',
                    //    title: '父级名称',
                    //    align: 'center',
                    //    sortable: true
                    //},
                    _self = this;
                    var obj = [{
                        checkbox: true,             //是否显示复选框
                        visible: true
                    },
                    {
                        field: 'DeptId',
                        title: 'Id',
                        visible: false
                    }, {
                        field: 'DeptName',
                        title: '名称',
                        align: 'center',
                        sortable: true
                    }, {
                        field: 'DeptNo',
                        title: '编号',
                        align: 'center',
                        sortable: true
                    }, {
                        field: 'FatherName',
                        title: '父级',
                        align: 'center',
                        sortable: true
                    }, {
                        field: 'ParentId',
                        title: 'ParentId',
                        align: 'center',
                        visible: false
                    },
                    //{
                    //    field: 'CName',
                    //    title: '创建人',
                    //    align: 'center',
                    //    sortable: true
                    //},
                    // {
                    //    field: 'UName',
                    //    align: 'center',
                    //    title: '修改人',
                    //    sortable: true
                    //}, {
                    //    field: 'ModifiedDate',
                    //    title: '修改时间',
                    //    align: 'center',
                    //    sortable: true,
                    //    formatter: function (value, row, index) {
                    //        return _self.jsonDateFormat(value);
                    //    }
                    //},
                    {
                        field: 'Remark',
                        align: 'center',
                        title: '备注'
                    }, {
                        field: 'IsManage',
                        align: 'center',
                        title: '创建下级权限',
                        formatter: function (value, row, index) {
                            if (value == 1) {
                                return '<span class="label label-success">允许</span>';
                            } else {
                                return '<span class="label label-default">禁止</span>';
                            }
                        }
                    }];

                    //$("#bootstraptable").bootstrapTable({
                    //    url: 'Dept/List',    //表格数据请求地址
                    //    method: "POST",
                    //    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    //    toolbar: '#toolbar', //工具按钮用哪个容器
                    //    striped: true, //是否显示行间隔色
                    //    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    //    sortable: true, //是否启用排序
                    //    sortOrder: "desc", //排序方式
                    //    sortName: "CreateDate",
                    //    pagination: true, //是否显示分页（*）
                    //    paginationLoop: true,
                    //    onlyInfoPagination: false,
                    //    sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                    //    pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                    //    pageSize: 10, //每页的记录行数（*）
                    //    pageList: [10, 25, 50, 100, 'All'], //可供选择的每页的行数（*）
                    //    search: true, //是否显示表格搜索
                    //    strictSearch: false, //设置为 true启用全匹配搜索，否则为模糊搜索。
                    //    trimOnSearch: true, //设置为 true 将自动去掉搜索字符的前后空格。
                    //    smartDisplay: true,
                    //    showPaginationSwitch: false,
                    //    showColumns: false, //是否显示所有的列（选择显示的列）
                    //    showHeader: true, //是否显示列头。
                    //    showFooter: false, //是否显示列脚。
                    //    showRefresh: true, //是否显示刷新按钮
                    //    showExport: false, //是否显示导出按钮
                    //    exportDataType: "all",
                    //    buttonsAlign: "right", //按钮位置
                    //    Icons: 'glyphicon-export',
                    //    minimumCountColumns: 1, //最少允许的列数s
                    //    clickToSelect: true, //是否启用点击选中行
                    //    uniqueId: "DeptId", //每一行的唯一标识，一般为主键列
                    //    showToggle: true, //是否显示详细视图和列表视图的切换按钮
                    //    showFullscreen: false,
                    //    cardView: false, //是否显示详细视图
                    //    detailView: false, //是否显示父子表
                    //    singleSelect: true,		//单选
                    //    // 设置树状表格参数
                    //    treeShowField: 'DeptName',
                    //    parentIdField: 'ParentId',		//父节点id
                    //    queryParams: function (params) {
                    //        var temp = {
                    //            limit: params.limit,     //页面大小
                    //            offset: params.offset,   //页码
                    //            sort: params.sort,      //排序列名
                    //            order: params.order, //排序命令（desc，asc）
                    //            _: params._,
                    //            search: params.search
                    //        };
                    //        temp.datemin = _self.$refs.datemin.value;
                    //        temp.datemax = _self.$refs.datemax.value;
                    //        return yui.extend(temp, app.qParams);
                    //    },
                    //    queryParamsType: 'limit',
                    //    onLoadSuccess: function (data) {
                    //        //console.log(data);
                    //        $("#bootstraptable").treegrid({
                    //            initialState: 'collapsed', // 所有节点都折叠
                    //            treeColumn: 1,//指明第几列数据改为树形
                    //            //expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
                    //            //expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                    //            //onChange: function () {
                    //            //    $("#bootstraptable").bootstrapTable('resetWidth');
                    //            //}
                    //        });
                    //    },
                    //    columns: obj
                    //});
                    yui.table("bootstraptable", "/Dept/List", obj, "POST", "DeptId");
                },
                showL: function () {
                    var width = 600;
                    if (this.clientWidth <= 767) {
                        width = this.clientWidth * 0.9;
                    }
                    yui.layershow("添加层级", "/Dept/Add", width, 520);
                },
                searchL: function () {
                    $("#bootstraptable").bootstrapTable('refresh');
                },
                editL: function () {
                    var arr = $("#bootstraptable").bootstrapTable('getSelections');
                    //禁止修改首级
                    var filters = arr.filter(function (data) {
                        return data.ParentId == 0;
                    });
                    if (filters.length > 0) {
                        layer.alert("您无权限修改管理员级！", { icoon: 3, skin: "layer-ext-moon" });
                        return;
                    }
                    var width = 600;
                    if (this.clientWidth <= 767) {
                        width = this.clientWidth * 0.9;
                    }
                    if (arr.length > 0) {
                        var index = layer.confirm("您确定要修改吗？", { btn: ["确定", "取消"] }, function () {
                            layer.close(index);
                            var id = arr[0].DeptId;
                            var parentId = arr[0].ParentId;
                            yui.layershow("修改层级信息", "/Dept/Add?id=" + id + "&parentId=" + parentId, width, 520);
                        }, function () {

                        });
                    } else {
                        layer.alert("请选中行", { icoon: 3, skin: "layer-ext-moon" });
                    }
                },
                deleteL: function () {
                    var _self = this;
                    var arr = $("#bootstraptable").bootstrapTable('getSelections');
                    if (arr.length > 0) {
                        var index = layer.confirm("您确定要删除吗？", { btn: ["确定", "取消"] }, function () {
                            var id = arr[0].DeptId;
                            yui.$axiosget('/Dept/Delete?id=' + id)
                                .then(function (response) {
                                    if (response.data.Item1) {
                                        layer.msg(response.data.Item2 || errorMsg, { icon: 1 });
                                        _self.searchL();
                                    } else {
                                        layer.msg(response.data.Item2 || errorMsg, { icon: 5 });
                                    }
                                })
                                .catch(function (error) {
                                    layer.msg(error.message, { icon: 5 });
                                });
                            layer.close(index);
                        });
                    } else {
                        layer.alert("请选中行", { icoon: 3, skin: "layer-ext-moon" });
                    }
                }
            }
        });
    </script>
}